/**
 * blank_1: Generic padding.
 */

/* ==reset== */

html,
body {
	height: 100%;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	/*
	  Sets the font stack to fonts known to work properly with the above letter
	  and word spacings. See: https://github.com/yui/pure/issues/41/
	  The following font stack makes Pure Grids work on all known environments.
	  * FreeSans: Ships with many Linux distros, including Ubuntu
	  * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
		Arial to get picked up by the browser, even though neither is available
		in Chrome OS.
	  * Droid Sans: Ships with all versions of Android.
	  * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
	  */
	font-family: FreeSans, Arimo, Helvetica, Arial, sans-serif;
}
iframe {
	border: none;
	width: 100%;
	height: 100%;
}
a {
	text-decoration: none;
}
a img {
	border: none;
}
.clearfix{
	@include clearfix;
}
/**
 * ==LAYOUTS==
 */

/* ====================Document stream layout====================== */

.panel {
	position: relative;
	padding: 5px 0 0 5px;
	/* blank_1 */
	&.hasMenu{
		padding-top: 39px;
		/* blank_1*2 + menu's height + blank_1 */
	}
	//divider inside the panel
	hr{
		border-bottom: none;
		margin: 0 5px 5px 0;
		opacity: 0.4;
	}
}
.row {
	position: relative;
	margin-bottom: 5px;
	/* blank_1 */
	margin-right: 5px;
	/* blank_1 */
	/*	background: #f0f0f0;*/
	min-height: 30px;

	@include clearfix;
}
/* ====================Float stream layout ======================== */

.left {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	/* blank_1 */
}
.right {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	/* blank_1 */
}
.h-max {
	width: 100%;
}
/* ====================Position stream layout====================== */

/**
 * Absolute position
 */

.dock {
	position: absolute;
	float: none;
	&.top,
	&.bottom{
		padding-left: 5px;
	}
}
/**
 * Fixed position.
 *
 * Fixing DOMs mainly to localization by fixed position.
 * To SCREEN !!!
 */

.fix {
	position: fixed;
	float: none;
	top: 0;
	left: 0;
}
/**
* Size & Position.
*/
.dock,
.fix{
	&.right{
		right: 0;
		left: auto;
	}
	&.left{
		left: 0;
		right: auto;
	}
	&.top{
		top: 0;
		bottom: auto;
	}
	&.bottom{
		top: auto;
		bottom: 0;
	}
	&.v-max{
		top: 0;
		bottom: 0;
	}
	&.h-max{
		right: 0;
		left: 0;
		width: auto;
	}
}

/* == MODULES == */

/* === INPUTs ===*/

input,
select,
textarea {
	padding: 5px;
	height: 30px;
	box-sizing: border-box;
	width: 100%;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	@include single-transition(border);
}
input[disabled],
select[disabled],
textarea[disabled] {
	cursor: not-allowed;
}

label {
	display: inline-block;
	font-size: 87.5%;
	font-weight: bold;
	position: relative;
	cursor: pointer;
	color: #444;
	padding-right: 1.5em;
	//placeholder align to right
	.caption{
		position: absolute;
		bottom: 5px;
		right: 10px;
	}
	//hidden them
	input[type=checkbox], input[type=radio]{
		display: none;
	}
	//style them in a separate tag
	input[type=checkbox] + .form-control,
	input[type=radio] + .form-control{
		position: absolute;
		margin: auto;
		top:0;
		bottom:0;
		right: 1px;
		width: 14px;
		height: 14px;
		background-image: linear-gradient(to bottom,#fff 0,#c9c9c9 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#c9c9c9));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c9c9c9', GradientType=0);
		border: 1px solid #3c3c3c;
		border-radius: 4px;
	}
	input[type=radio] + .form-control{
		border-radius: 50%;
	}
	// checked state
	input[type=checkbox]:checked + .form-control,
	input[type=radio]:checked + .form-control{
		background-image: linear-gradient(to bottom,#2b2b2b 0,#7b7b7b 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,from(#2b2b2b),to(#7b7b7b));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b2b2b', endColorstr='#7b7b7b', GradientType=0);
		border-color: #262626;
	}
	input[type=radio]:checked + .form-control:before{
		content: '';
		position: absolute;
		margin: auto;
		top:0;
		bottom:0;
		right: 3px;
		width: 8px;
		height: 8px;
		background-image: linear-gradient(to bottom,#fff 0,#c9c9c9 100%);
		background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#c9c9c9));
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c9c9c9', GradientType=0);
		border-radius: 50%;
	}
	input[type=checkbox]:checked + .form-control:before{
		content: '';
		position: absolute;
		margin: auto;
		width: 3px;
		height: 7px;
		border: solid white;
		border-width: 0 3px 3px 0;
		@include rotate(45deg);
		top:0;
		bottom: 2px;
		right: 4px;
	}
}

label:only-child{
	width: 100%;
	padding-right: 0;
}

textarea{
	resize: none;
	height: 6em;
}
// fix for -moz-
select optgroup{
	font-style: normal;
}

/** === TITLE bar === */

.title {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	line-height: 34px;
	/* Eq this.height */
	padding: 0 5px;
	color: $brand-color;
	font-weight: bold;
}
/* == SideTOOOLS == */
.toolbar{
	margin: 0;
	padding: 0;
	list-style: none;
	li{
		position: relative;
	}
}

ul.toolbar li,
ul.toolbar.left li{
	margin-right: 5px;
	float: left;
}
ul.toolbar.right li {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	&:last-child{
		margin-left: 0;
	}
}
ul.toolbar li.hr {
	min-height: 30px;
}
ul.toolbar.dock {
	float: none;
}
/* == HANDLE == */

.handle {
	cursor: pointer;
	color: #fafafa;
	line-height: 32px;
	text-align: center;
	&.left{
		left: -13px;
	}
	&.right{
		right: -13px;
	}
	&.left,
	&.right{
		width: 10px;
		height: 30px;
		top: 50%;
		margin-top: -15px;
		background-image:url("../assets/testweb_icon.svg") ;
		background-position: -910px 0;
		background-repeat: no-repeat;
	}
}

/* == TABLES == */

table {
	empty-cells: show;
	width: 100%;
	thead{
		text-align: left;
	}
	caption{
		color: #222;
		font: italic 85%/1 arial, sans-serif;
		padding: 1em 0;
		text-align: left;
	}
	td, th{
		/*  inner column border */
		font-size: inherit;
		margin: 0;
		overflow: visible;
		/*to make ths where the title is really long work*/
		padding: 2px 0.5em;
		/* cell padding */
	}

	.ico-s-delete,
	.ico-s-up,
	.ico-s-down{
		opacity: 0;
	}
	tr:hover{
		.ico-s-delete,
		.ico-s-up,
		.ico-s-down{
			opacity: 1;
		}
	}
}
//small icons inside table
.ico-s-delete,
.ico-s-up,
.ico-s-down{
	display: inline-block;
	width: 12px;
	height: 12px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-image: url("../assets/black_12x12_icon.svg");
}
.ico-s-delete{
	background-position: 0 0;
}
.ico-s-up{
	background-position: -12px 0;
}
.ico-s-down{
	background-position: -24px 0;
}

.status.row {
	font-size: 87.5%;
	min-height: 12px;
	line-height: 1;
	margin-top: 5px;
}
/* ==Bar module== */

.bar {
	width: 600px;
	min-height: 300px;
}
.bar .title {
	cursor: move;
}



/* ID */

#OC {
	width: 450px;
}
.dock.bottom.h-max {
}
#mask {
	background: rgba(0, 0, 0, 0.45);
}
#mask.transparent {
	background: transparent;
}
.highlight {
	position: absolute;
	z-index: 10;
	background: rgba(255, 255, 66, 0.7);
}


#axes{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
}
#axes-x,#axes-y{
	position: absolute;
	margin: 0;
	border-style: dotted;
	border-color: #444;
	border-width: 0px;
}
#axes-x{
	left:30px;
	height: 100%;
	width: 0;
	border-left-width: 1px;
}
#axes-y{
	top: 40px;
	width: 100%;
	height: 0;
	border-top-width: 1px;
}
#control{
	background: transparent;
	border: none;
	position: absolute;
	top:-9999px;
}
.area{
	position: absolute;
	z-index: 10;
	border: 2px solid blue;
}

.ico{
	background-image: url("../assets/testweb_icon.svg");
	background-repeat: no-repeat;
	background-position: 0 0;
	//prevent overlapping issues with drop menu
	z-index: 0;
	//change background position for each icon
	&.new{
		background-position: -300px 0;
	}
	&.open{
		background-position: -30px 0;
	}
	&.save{
		background-position: -570px 0;
	}
	&.add{
		background-position: -600px 0;
	}
	&.trash{
		background-position: -420px 0;
	}
	&.json{
		background-position: -360px 0;
	}
	&.check{
		background-position: -90px 0;
	}
	&.highlight-text{
		background-position: -870px 0;
	}
	&.refresh{
		background-position: -180px 0;
	}
	&.edit{
		background-position: -630px 0;
	}
	&.play{
		background-position: -660px 0;
	}
	&.stop{
		background-position: -690px 0;
	}
	&.step-by{
		background-position: -720px 0;
	}
	&.record{
		background-position: -750px 0;
	}
	&.pause{
		background-position: -780px 0;
	}
	&.terminal{
		background-position: -60px 0;
	}
	&.dictionary{
	}
	&.search{
		background-position: -120px 0;
	}
	&.close{
		background-position: -960px 0;
	}
	&.goto{
		background-position: -240px 0;
	}
	&.minus{
		background-position: -450px 0;
	}
	&.delete{
		background-position: -450px 0;
	}
}

fieldset{
	legend{
		padding: 0 2px;
	}
}

.pagination{
	margin: 5px 5px 5px 0;
	@include clearfix();
	li{
		display: inline;
		a{
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
		}
		&:first-child{
			a{margin-left: 0;}
		}
		&.disabled{
			a{cursor: not-allowed;}
		}
		&.active{
			a{
				z-index: 2;
				cursor: default;
				color: white;
			}
		}
	}
}

@each $key, $value in $theme{
	@if map-has_key($config, $key){
		.#{$value}{

			a {
				color: setStyle($config, $key, brand-primary);
				&:hover,
				&:active,
				&:focus{
					color: darken(setStyle($config, $key, brand-primary),3%);
				}
			}

			.dock,
			.fix{
				&.right{
					border-left: 5px solid setStyle($config, $key, title-bg);
				}
				&.left{
					border-right: 1px solid setStyle($config, $key, title-bg);
				}
			}

			input,
			select,
			textarea {
				border: 1px solid setStyle($config, $key, input-border);
				background-color: setStyle($config, $key, input-bg);
				border-radius: setStyle($config, $key, border-radius-base);
			}
			input:focus,
			select:focus,
			textarea:focus {
				border-color: setStyle($config, $key, input-border-focus);
			}
			input[disabled],
			select[disabled],
			textarea[disabled] {
				background-color: setStyle($config, $key, input-disable-bg);
				color: setStyle($config, $key, input-disable-text);
			}
			input[readonly],
			select[readonly],
			textarea[readonly] {
				background-color: setStyle($config, $key, input-disable-bg);
				color: setStyle($config, $key, input-disable-text);
			}

			label {
				.caption{
					color: setStyle($config, $key, input-text);
				}
			}

			.title{
				background-color: setStyle($config, $key, title-bg);
			}

			ul.toolbar li.hr {
				border-left: 1px solid setStyle($config, $key, panel-divider);
			}

			.handle{
				background-color: setStyle($config, $key, title-bg);
			}
			/* == TABLES == */

			table {
				tbody{
					>tr:hover{
						background-color: setStyle($config, $key, table-bg-hover) !important;
					}
					>tr:nth-child(odd){
						background-color: darken(setStyle($config, $key, panel-bg), 3%);
					}
				}
				td, th{
					border: 1px solid setStyle($config, $key, table-border);
				}
			}
			/* ==Bar module== */

			.bar {
				border: solid setStyle($config, $key, title-bg);
				background: setStyle($config, $key, panel-bg);
				color: setStyle($config, $key, panel-text);
				//prevent override issue
				border-width: 0 5px 5px 5px;
			}
			/* ID */

			#OC {
				background: setStyle($config, $key, panel-bg);
				color: setStyle($config, $key, panel-text);
			}
			.dock.bottom.h-max {
				background: setStyle($config, $key, panel-bg);
			}
			/**
			   * == COLORS ==
			   */
			.alert {
				background-color: setStyle($config, $key, brand-danger);
			}
			.success {
				background-color: setStyle($config, $key, brand-success);
			}
			.warning {
				background-color: setStyle($config, $key, brand-warning);
			}
			.secondary {
				background-color: setStyle($config, $key, brand-info);
			}
			.primary {
				background-color: setStyle($config, $key, brand-primary);
			}

			.pagination{
				li{
					a{
						border: 1px solid setStyle($config, $key, panel-divider);
					}
					&.active{
						a{
							background-color: setStyle($config, $key, brand-primary);
							border-color: setStyle($config, $key, brand-primary);
						}
					}
				}
			}

		}
	}
	@else {
		@warn "The key isn't defined in the map setting"
	}
}